<template>
    <ul id="Marquee">
        <li class="text-item" :class="{'animate': isAnimate}" v-if="index == 0" v-for="(item, index) in textList" :key="index">{{item.noticeContent}}</li>
        <li class="text-item" v-else="">{{item.noticeContent}}</li>
    </ul>
</template>
<script>
export default {
    name: "Marquee",
    props: {
        textList: {
            type: Array,
            default: [] //这样可以指定默认的值
        },
        time: {
            type: Number,
            default: 3000
        }
    },
    data() {
        return {
            isAnimate: true
        };
    },
    mounted() {
        let this_ = this;
        setInterval(this_.autoani, this_.time);
    },
    methods: {
        autoani() {
            let this_ = this;
            this_.isAnimate = true; // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
            setTimeout(() => {
                //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
                this_.textList.push(this_.textList[0]); // 将数组的第一个元素添加到数组的
                this_.textList.shift(); //删除数组的第一个元素
                this_.isAnimate = false; // margin-top 为0 的时候取消过渡动画，实现无缝滚动
            }, 1000);
        }
    },
    components: {},
    computed: {}, // 计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值
    watch: {},
    filters: {}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss">
#Marquee {
    height: rem(31);
    overflow: hidden;
    .text-item {
        height: rem(31);
        line-height: rem(31);
        font-size: rem(26);
        color: #bababa;
    }
    .text-item.animate {
        margin-top: rem(-31);
        transition: all 1s;
        -moz-transition: all 1s; /* Firefox 4 */
        -webkit-transition: all 1s; /* Safari 和 Chrome */
        -o-transition: all 1s; /* Opera */
    }
}
</style>
